<template>
  <div class="login-layer">
    <h3>{{ title }}-{{ age }}</h3>
    <p>
      <span>UserName:</span>
      <input type="text" class="input-item" v-model.trim="userName" />
    </p>
    <p>
      <span>PassWord:</span>
      <input type="password" class="input-item" v-model.trim="passWord" />
    </p>
    <p>
      <button type="button" @click="userLogin">Log In</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      userName: "wenqingwu",
      passWord: "123456",
    };
  },
  // props：父组件传值给子组件，时单向传值。
  // props: ["title", "age"], // 在调用子组件时，绑定的像HTML标签属性的属性名，就是props的属性名。
  // props验证: 在开发环境帮助你准确使用数据类型.
  props: {
    title: String,
    age: [Number, String],
  },
  methods: {
    userLogin() {
      // this.title = "abcd"; // error!!
      if (!/^\w{6,10}$/.test(this.userName)) {
        alert("输入的用户名不规范");
        return;
      }
      if (!/^\w{6,10}$/.test(this.passWord)) {
        alert("输入的密码不规范");
        return;
      }
      // this.$axios({
      //   url: this.url + "/user/login",
      //   method: "post",
      //   data: { username: this.userName, password: this.passWord },
      // }).then((res) => {
      //   if (res.data.code === 0) {
      //     // 触发父组件绑定在子组件上面的自定义的事件,$emit()会模拟自定义事件的发生,从而执行绑定的函数.
      //     // $emit('自定义的事件名称', 传递的参数)
      //     this.$emit("changeLogin", true);
      //   } else {
      //     alert(res.data.msg)
      //   }
      // });

      this.$axios
        .post(this.url + "/user/login", {
          username: this.userName,
          password: this.passWord,
        })
        .then((res) => {
          if (res.data.code === 0) {
            // 触发父组件绑定在子组件上面的自定义的事件,$emit()会模拟自定义事件的发生,从而执行绑定的函数.
            // $emit('自定义的事件名称', 传递的参数)
            this.$emit("changeLogin", true);
          } else {
            alert(res.data.msg);
          }
        });
    },
  },
  beforeCreate() {
    console.log("1. login is  beforeCreate");
  },
  created() {
    console.log("2.login is  created");
  },
  beforeMount() {
    console.log("3. login is beforeMount");
  },
  mounted() {
    console.log("4. login is mounted");
  },
  beforeUpdate() {
    console.log("5.login is  beforeUpdate");
  },
  updated() {
    console.log("6. login is updated");
  },
  beforeDestroy() {
    console.log("7.login is  beforeDestroy");
  },
  destroyed() {
    console.log("8.login is  destoryed");
  },
};
</script>

<style scoped lang="less">
/* scoped, 表示编译为局部样式表 */
.login-layer {
  width: 30%;
  height: 340px;
  min-width: 300px;
  border: 1px solid rgb(199, 194, 194);
  border-radius: 3px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0 2%;
  & h3 {
    text-align: center;
    font-size: 2rem;
    color: green;
    margin: 30px 0 20px;
    border-bottom: 1px solid rgb(199, 194, 194);
  }
  & > p {
    padding: 20px 0;
    text-align: center;
    & > span {
      color: rgb(75, 73, 73);
      font-weight: bold;
      font-size: 1.4rem;
      margin-right: 10px;
      display: inline-block;
      width: 20%;
      text-align: right;
    }
    & > input {
      width: calc(80% - 10px);
      height: 40px;
      line-height: 40px;
      border-width: 0;
      outline: 1px solid gray; /*轮廓线，不参与盒子模型计算*/
      border-radius: 3px;
    }
    & > button {
      width: 200px;
      height: 40px;
      background-color: rgb(197, 98, 98);
      border-width: 0;
      outline: 1px solid rgb(197, 98, 98);
      border-radius: 3px;
      font-size: 1.6rem;
      cursor: pointer;
      &:hover {
        background-color: #f00;
        color: white;
      }
    }
  }
}
</style>